<template>
  <div class="clipboard">
    <pre>
        <code :id="target"><slot v-if="this.$slots.default"></slot></code>
    </pre>
    <div class="copy-tool">
      <span v-if="showTip && showSuccessTip" class="success-tip copy-tip"
        ><i class="icon el-icon-success"></i
      ></span>
      <span v-if="showTip && showErrorTip" class="error-tip copy-tip"
        ><i class="icon el-icon-error"></i
      ></span>
      <i
        :class="`el-icon-document-copy copyBtn_${randomString}`"
        :data-clipboard-target="`#${target}`"
      ></i>
    </div>
  </div>
</template>
<script>
import { randomString } from "@/utils/index";

export default {
  name: "Clipboard",
  props: {
    text: {
      type: String,
      default: "复制",
    },
    codeText: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "small",
    },
    target: {
      type: String,
      default: "",
    },
    showTip: {
      type: Boolean,
      default: true,
    },
    tipSuc: {
      type: String,
      default: "复制成功",
    },
    tipErr: {
      type: String,
      default: "复制失败",
    },
  },
  data() {
    return {
      showSuccessTip: false,
      showErrorTip: false,
      clipboardInstance: null,
      target: "",
    };
  },
  mounted() {
    this.randomString = randomString(8);
    this.target = `copyTarget_${this.randomString}`;
    hljs.highlightAll();
    this.clipboardInstance = new ClipboardJS(`.copyBtn_${this.randomString}`);
    this.clipboardInstance.on("success", (e) => {
      console.log(e);
      e.clearSelection();
      this.showSuccessTip = true;
      setTimeout(() => {
        this.showSuccessTip = false;
      }, 1000);
    });
    this.clipboardInstance.on("error", (e) => {
      console.log("复制失败！", e);
      this.showErrorTip = true;
      setTimeout(() => {
        this.showErrorTip = false;
      }, 1000);
    });
  },
};
</script>
<style lang="scss" scoped>
.clipboard {
  width: 100%;
  display: inline-block;
  font-size: 0;
  margin: 5px 0;
  pre {
    width: 100%;
    font-size: 0px;
    line-height: 1 !important;
    box-sizing: border-box;
    display: flex;
    margin: 0;
  }
  code {
    width: 100%;
    color: #ddd;
    word-break: break-all;
    line-height: 1.5 !important;
    white-space: pre-wrap;
    font-size: 14px;
    text-indent: 0 !important;
  }
  .copy-tool {
    background-color: #000;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .el-icon-document-copy {
      font-size: 14px;
      color: #fff;
      margin: 0 10px;
      cursor: pointer;
    }
  }
  .copy-tip {
    display: inline-block;
    padding-left: 5px;
    font-size: 12px;
    line-height: 12px;
    i.icon {
      font-size: 12px;
      margin-right: 2px;
      &.el-icon-success {
        color: green;
      }
      &.el-icon-error {
        color: red;
      }
    }
  }
}
</style>